<template>
  <el-dialog
    custom-class="add-new-station"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd()"
    title="添加维修站"
    append-to-body
    width="500px">
    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      size="medium"
      label-width="100px" 
      style="margin-top: 10px;">
      <el-form-item 
        label="维修厂名称" 
        prop="repairCompanyName"
        :rules="[{ required: true, message: '维修厂名称不能为空', trigger: 'blur' }]">
        <el-input 
          placeholder="维修厂名称" 
          v-model="fm.ps.repairCompanyName"
        />
      </el-form-item>

      <el-form-item 
        label="联系人" 
        prop="linkMan" 
        :rules="[{ required: true, message: '联系人不能为空', trigger: 'blur' }]">
        <el-input 
          placeholder="联系人" 
          v-model="fm.ps.linkMan"
        />
      </el-form-item>

      <el-form-item 
        label="联系电话" 
        prop="linkPhone" 
        :rules="[{ required: true, message: '联系电话不能为空', trigger: 'blur' }]">
        <el-input 
          maxlength="11"
          placeholder="联系电话" 
          v-model="fm.ps.linkPhone"
        />
      </el-form-item>

      <el-form-item 
        label="主营业务" 
        prop="serviceContent"
        :rules="[{ required: true, message: '主营业务不能为空', trigger: 'blur' }]">
        <el-input 
          placeholder="请输入主营业务" 
          v-model="fm.ps.serviceContent"
        />
      </el-form-item>

      <el-form-item 
        label="地址" 
        prop="repairPoint.name" 
        :rules="[{ required: true, message: '地点位置不能为空', trigger: 'blur' }]">
        <MapPointInp 
          :name="'repairPoint'" 
          :placeholder="'请搜索选择地点位置'" 
          :defPoint="fm.ps.repairPoint"
          @handleSel="setPoint"
          style="width: 100%;"
        />
      </el-form-item>
    </el-form>

    <div class="fm-btn-row">
      <el-button 
        :loading="fm.sb.load" 
        type="primary" 
        icon="el-icon-s-order" 
        @click="onSubmit">
        {{fm.sb.text}}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import MapPointInp from '@/components/MapPointInp';

import * as orderSer from "@/api/services/order.service";

export default {
  name: "AddNewStation",
  directives: {elDragDialog},
  props: ["state"],
  components: { MapPointInp },
  data() {
    return {
      fm: {
        fname: 'addNewStationFm',
        sb: {load: false, text: '提交申请'},
        ps: {
          // 联系人
          linkMan: '', 
          // 联系电话
          linkPhone: '', 
          // 维修厂地址
          repairPoint: {
            address: '',
            name: '',
            lnglat: '',
          }, 
          // 维修厂名称
          repairCompanyName: '', 
          // 主营业务
          serviceContent: '', 
        }
      }
    };
  },
  methods: {
    closeMd(ps) {
      ps = ps ? {state: false, ...ps} : {state: false};
      this.$emit("myClick", ps);
    },

    // 设置地点
    setPoint(e){
      let that = this, U = that.U, fm = that.fm, ps = fm.ps;

      if(e.p){
        ps[e.name] = {
          address: e.p.address, 
          name: e.p.name, 
          lnglat: e.p.lnglat, 
        };
        // 对应点不为空，则取消验证
        if(ps[e.name].name) U.clearFmVali(that, fm.fname, `${e.name}.name`);
      }else{
        ps[e.name] = {
          address: '', 
          name: '', 
          lnglat: '', 
        };
      }
    },

    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          // 参数处理
          if(ps.repairPoint.name){
            ps.repairAddress = ps.repairPoint.name;
            ps.repairLatLon = ps.repairPoint.lnglat;
            delete ps.repairPoint;
          }
          
          orderSer.addRepairCustom(ps).then(res => {
            sb.load = false;

            if (res.code !== 1) {
              U.qerror(res.msg);
            }else{
              U.qsuccess(res.msg);

              that.closeMd({id: res?.id});
            }
          });
        }
      });
    },

  },
};
</script>